<template>
  <el-drawer v-model="isDrawerShow" :title="drawerTitle" :before-close="closefun">
    <el-button
      class="RecAttendance"
      type="primary"
      size="small"
      @click="handleKaoqinchongsuan"
      >重算考勤</el-button
    >
    <el-timeline
      v-if="
        attendanceRecord?.day_check_status !== undefined &&
        attendanceRecord?.day_check_status.length > 0
      "
    >
      <el-timeline-item
        v-for="dayCheckStatus in attendanceRecord?.day_check_status"
        :key="dayCheckStatus.id"
        :timestamp="timeLineItemTimestamp(dayCheckStatus.actually_time)"
        type="primary"
      >
        <p>
          <el-icon>
            <Check />
          </el-icon>
          <span v-if="dayCheckStatus.plan_type !== undefined">{{
            planType(dayCheckStatus.plan_type)
          }}</span>
          <el-tag
            v-if="dayCheckStatus.actually_status"
            :type="tagType(dayCheckStatus.actually_status)"
          >
            {{ status(dayCheckStatus.actually_status) }}
          </el-tag>
          <el-tag
            v-if="dayCheckStatus.flag !== undefined && dayCheckStatus.flag !== null"
            type="info"
          >
            {{ dayCheckStatus.flag }}
          </el-tag>
          <el-tag
            v-if="dayCheckStatus.subflag !== undefined && dayCheckStatus.subflag !== null"
            type="info"
          >
            {{ dayCheckStatus.subflag }}
          </el-tag>
          <span class="buttons">
            <el-button
              size="small"
              type="primary"
              @click="handleEditAttendanceStatusClick(dayCheckStatus)"
            >
              修改考勤
            </el-button>
          </span>
        </p>
        <p>
          <el-icon>
            <Timer />
          </el-icon>
          <span>考勤时间：{{ dayCheckStatus.plan_time }}</span>
        </p>
        <p v-if="dayCheckStatus.actually_place !== 'None'">
          <el-icon>
            <LocationInformation />
          </el-icon>
          <span>{{ dayCheckStatus.actually_place }}</span>
        </p>
      </el-timeline-item>
      <el-timeline-item>
        <p
          style="font-size: 15px; font-weight: 600"
          v-if="attendanceRecord.hasOwnProperty('worktimes')"
        >
          当日有效工作时长：{{ attendanceRecord?.worktimes }} 小时
        </p>
      </el-timeline-item>
    </el-timeline>
    <el-empty v-else description="考勤状态为空" />
    <div v-if="attendanceStatusRequest.id !== undefined" class="edit-attendance">
      <h3 class="title">修改考勤状态</h3>
      <el-form
        ref="formRef"
        :model="attendanceStatusRequest"
        :rules="rules"
        label-width="80"
      >
        <el-form-item label="ID" prop="id">
          <el-input v-model="attendanceStatusRequest.id" disabled />
        </el-form-item>

        <el-form-item label="考勤状态" prop="kaoqin_status">
          <!-- <attendance-status-selector v-model="attendanceStatusRequest.kaoqin_status" /> -->
          <el-select-v2
            v-model="attendanceStatusRequest.kaoqin_status"
            :options="options"
          />
        </el-form-item>

        <el-form-item label="考勤时间" prop="kaoqin_time">
          <span style="margin-right: 5px"> {{ YYYY_MM_DD }}</span>
          <span>
            <el-time-picker
              v-model="attendanceStatusRequest.kaoqin_time"
              placeholder="请选择时间"
              :disabled="isDisabled"
              :disabled-minutes="disabledMinutes"
              :disabled-seconds="disabledSeconds"
              value-format="HH:mm:ss"
              :disabled-hours="disabledHours"
              style="display: inline-block; width: 180px"
          /></span>
        </el-form-item>
        <el-form-item label="备注" prop="note">
          <el-input v-model="attendanceStatusRequest.note" :rows="4" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-popconfirm :title="messageKaoqin" width="300"  @confirm="handleSubmitClick">
            <template #reference>
            <el-button type="primary">提交</el-button>
            </template>
          </el-popconfirm>
          <el-button @click="handleCancelClick">取消</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据列表 -->
    <el-button type="primary" @click="AttendanceDetails">{{
      IsAttendanceDetails ? "关闭考勤明细" : "查看考勤明细"
    }}</el-button>
    <div v-if="IsAttendanceDetails">
      <el-card
        style="max-width: 100%; margin-top: 10px"
        v-if="AttendanceDetailsValue.schedule_lists.length > 0"
      >
        <p style="font-weight: 600">当日排班门店</p>
        <el-scrollbar height="180px">
          <el-table
            :data="AttendanceDetailsValue.schedule_lists"
            style="width: 100%; font-size: 10px"
            height="180"
          >
            <el-table-column prop="shop_name" label="排班门店名称" width="100" />
            <el-table-column label="审核状态">
              <template #default="scope">
                {{
                  scope.row.flag == 1
                    ? "已通过"
                    : scope.row.flag == 3
                    ? "待审批"
                    : scope.row.flag == 4
                    ? "已退回"
                    : "未提交"
                }}
              </template>
            </el-table-column>
            <el-table-column prop="longitude" label="门店经度" />
            <el-table-column prop="latitude" label="门店维度 " />
            <el-table-column prop="shop_id" label="排班门店ID" />
            <el-table-column label="类型">
              <template #default="{ row }">
                <span>
                  {{ row.is_rest == "1" ? "排休" : "排班" }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="rest_type" label="排休类型" />
            <el-table-column prop="buzhong_type" label="补钟类型" />
            <el-table-column prop="buzhong_time" label="补钟时间" />
          </el-table>
        </el-scrollbar>
      </el-card>
      <el-card v-else style="max-width: 100%; margin-top: 10px">
        <p style="margin-bottom: 8px; font-weight: 600">当日排班门店</p>
        <p>无数据</p>
      </el-card>

      <el-card
        style="max-width: 100%; margin-top: 10px"
        v-if="AttendanceDetailsValue.schedule_detail_lists.length > 0"
      >
        <p style="font-weight: 600">排班详情列表</p>
        <el-scrollbar height="180px">
          <el-table
            :data="AttendanceDetailsValue.schedule_detail_lists"
            style="width: 100%; font-size: 10px"
            height="180"
          >
            <el-table-column prop="check_time" label="排班时间" width="140" />
            <el-table-column label="排班类型" width="75">
              <template #default="{ row }">
                <span>
                  {{ row.check_type == "OnDuty" ? "上班" : "下班" }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="number" label="排班序号" width="75" />
          </el-table>
        </el-scrollbar>
      </el-card>
      <el-card v-else style="max-width: 100%; margin-top: 10px">
        <p style="margin-bottom: 8px; font-weight: 600">排班详情列表</p>
        <p style="margin-bottom: 8px">无数据</p>
      </el-card>

      <el-card
        style="max-width: 100%; margin-top: 10px"
        v-if="AttendanceDetailsValue.attendance_records_lists.length > 0"
      >
        <p style="font-weight: 600">打卡列表</p>
        <el-scrollbar height="180px">
          <el-table
            :data="AttendanceDetailsValue.attendance_records_lists"
            style="width: 100%; font-size: 10px"
            height="180"
          >
            <el-table-column prop="kaoqinTime" label="打卡时间" width="140" />
            <!-- <el-table-column label="打卡状态">
              <template #default="scope">
                {{
                  scope.row.check_time_status == "1"
                    ? "正常打卡"
                    : scope.row.check_time_status == "2"
                    ? "补卡"
                    : scope.row.check_time_status == "3"
                    ? "请假"
                    : scope.row.check_time_status == "4"
                    ? "出差"
                    : "外出"
                }}
              </template>
            </el-table-column> -->

            <el-table-column label="打卡状态">
              <template #default="{ row }">
                <span>{{ staters(Number(row.distance).toFixed(2)) }}</span>
              </template>
            </el-table-column>

            <el-table-column label="打卡距离">
              <template #default="{ row }">
                <span> {{ Number(row.distance).toFixed(2) }}米 </span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="打卡地址" width="140" />
            <el-table-column prop="address" label="拍照" width="140">
              <template #default="{ row }">
                <div class="xianzhihangshu">
                  <a :href="row.picture" target="_blank">{{ row.picture }}</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="latitude" label="打卡经度" width="110" />
            <el-table-column prop="longitude" label="打卡维度" width="110" />
            <el-table-column prop="flag" label="打卡类型" />
            <el-table-column prop="check_time_sub_status" label="子标签" />
          </el-table>
        </el-scrollbar>
      </el-card>
      <el-card v-else style="max-width: 100%; margin-top: 10px">
        <p style="margin-bottom: 8px; font-weight: 600">打卡列表</p>
        <p>无数据</p>
      </el-card>

      <el-card
        style="max-width: 100%; margin-top: 10px"
        v-if="AttendanceDetailsValue.process_lists.length > 0"
      >
        <p style="font-weight: 600">审批列表</p>
        <el-scrollbar height="180px">
          <el-table
            :data="AttendanceDetailsValue.process_lists"
            style="width: 100%; font-size: 10px"
            height="180"
          >
            <el-table-column prop="type" label="审批类型" />
            <el-table-column prop="start_time" label="开始时间" width="140" />
            <el-table-column prop="finish_time" label="结束时间" width="140" />
            <el-table-column prop="leave_sub_type" label="子类型" />
            <el-table-column prop="jiabanShopName" label="加班门店名称" width="140" />
            <el-table-column prop="jiabanShopID" label="加班门店ID" />

            <!-- <el-table-column label="结束时间">
              <template #default="scope">
                {{ scope.row.finish_time == "" ? "None" : scope.row.finish_time }}
              </template>
            </el-table-column> -->
          </el-table>
        </el-scrollbar>
      </el-card>
      <el-card v-else style="max-width: 100%; margin-top: 10px">
        <p style="margin-bottom: 8px; font-weight: 600">审批列表</p>
        <p style="margin-bottom: 8px">无数据</p>
      </el-card>
    </div>
  </el-drawer>
</template>
<script lang="ts" setup>
import { computed, ref, watch, nextTick } from "vue";
import {
  AttendanceRecord,
  AttendanceRecordDayCheckStatus,
  AttendanceStatus,
  AttendanceStatusRequest,
  planType,
  status,
  ATTENDANCE_STATUS_QUANTITY,
} from "@/api/types/attendance";
import { Check, LocationInformation, Timer } from "@element-plus/icons-vue";
import { timeFormatter2 } from "@/utils/date";
import AttendanceStatusSelector from "@/components/selector/AttendanceStatusSelector.vue";
import { ElForm, ElMessage, FormRules, ElSelectV2 } from "element-plus";
import {
  updateAttendanceStatus,
  getAttendancecheck,
  getKaoqinBackcal,
} from "@/api/attendance";
import { isAxiosError } from "axios";

const isDrawerShow = defineModel<boolean>();

//考勤修改框的考勤时间
const YYYY_MM_DD = ref("");

const messageKaoqin=computed(()=>{
  return `考勤时间为：${YYYY_MM_DD.value} ${attendanceStatusRequest.value.kaoqin_time}`
})

const props = defineProps<{
  username?: string;
  attendanceRecord?: AttendanceRecord;
  userid?: string;
}>();

const emit = defineEmits<{
  success: [];
  updateSuccess: [];
}>();
const drawerTitle = computed(() => {
  IsAttendanceDetails.value = false;
  if (props.attendanceRecord?.day !== undefined) {
    return `${props.username}在${timeFormatter2(props.attendanceRecord?.day)}的考勤信息`;
  }
});

const attendanceStatusRequest = ref<AttendanceStatusRequest>({});
const formRef = ref<InstanceType<typeof ElForm>>();
const rules: FormRules = {
  id: [
    {
      required: true,
      message: "ID不能为空",
      trigger: "blur",
    },
  ],
  kaoqin_status: [
    {
      required: true,
      message: "考勤状态不能为空",
      trigger: "change",
    },
  ],
  note: [
    {
      required: true,
      message: "备注不能为空",
      trigger: "blur",
    },
  ],
  kaoqin_time: [
    {
      required: true,
      message: "考勤时间不能为空",
      trigger: "blur",
    },
  ],
};

const isDisabled = ref(false);

watch(
  () => attendanceStatusRequest.value.kaoqin_status,
  (newval, olldval) => {
    if (newval == 2 || newval == 3) {
      isDisabled.value = false;
    } else {
      isDisabled.value = true;
      const now = new Date(seletedataItem.value.plan_time as string);
      attendanceStatusRequest.value.kaoqin_time = `${String(now.getHours()).padStart(
        2,
        "0"
      )}:${String(now.getMinutes()).padStart(2, "0")}:${String(now.getSeconds()).padStart(
        2,
        "0"
      )}`;
    }
  },
  {
    deep: true,
  }
);

const staters = (val: any) => {
  let staterval = "";
  if (val > 300) {
    staterval = "外勤";
  } else if (val <= 300) {
    staterval = "内勤";
  } else {
    staterval = val;
  }
  return staterval;
};

interface AttendanceDetailsType {
  process_lists: any[];
  schedule_lists: any[];
  schedule_detail_lists: any[];
  attendance_records_lists: any[];
}

const IsAttendanceDetails = ref<boolean>(false);
const AttendanceDetailsValue = ref<AttendanceDetailsType>({
  process_lists: [],
  schedule_lists: [],
  schedule_detail_lists: [],
  attendance_records_lists: [],
});

const AttendanceDetails = async () => {
  try {
    if (IsAttendanceDetails.value) {
      IsAttendanceDetails.value = !IsAttendanceDetails.value;
    } else {
      const res = await getAttendancecheck({
        userid: props.userid,
        day: props.attendanceRecord?.day,
      });
      if (res.code == "200") {
        ElMessage.success("查询成功");
        AttendanceDetailsValue.value = res.data || [];
        IsAttendanceDetails.value = true;
      } else {
        ElMessage.error("查询失败");
      }
    }
  } catch (error) {}
};

function handleCancelClick() {
  attendanceStatusRequest.value = {};
}

//生成的考勤状态
const options = ref<{ label: string; value: number; disabled?: any }[]>([]);
//当前选中的考勤信息
const seletedataItem = ref<AttendanceRecordDayCheckStatus>({});

function getHour(val: string, houre?: number) {
  if (houre) {
    if (houre > 0) {
      const setDates = new Date(val);
      setDates.setHours(setDates.getHours() + 4);
      return setDates;
    } else {
      const setDates = new Date(val);
      setDates.setHours(setDates.getHours() - 4);
      return setDates;
    }
  }
  return new Date(val);
}

const makeRange = (start: number, end: number) => {
  const result: number[] = [];
  for (let i = start; i <= end; i++) {
    result.push(i);
  }
  return result;
};

// 小时限制
const disabledHours = () => {
  if (seletedataItem.value.plan_type == "onduty") {
    const startHour = getHour(seletedataItem.value.plan_time as string).getHours();
    const startDate = getHour(seletedataItem.value.plan_time as string).getDate();
    const startTime = new Date(
      getHour(seletedataItem.value.plan_time as string).getTime()
    );
    startTime.setHours(startHour + 4);
    if (startTime.getDate() !== startDate) {
      if (getHour(seletedataItem.value.plan_time as string).getMinutes() == 0) {
        return Array.from({ length: 24 }, (_, i) => i).filter(
          (hour) =>
            hour < getHour(seletedataItem.value.plan_time as string).getHours() &&
            hour >= startTime.getHours()
        );
      }

      return Array.from({ length: 24 }, (_, i) => i).filter(
        (hour) =>
          hour < getHour(seletedataItem.value.plan_time as string).getHours() &&
          hour > startTime.getHours()
      );
    } else {
      if (getHour(seletedataItem.value.plan_time as string).getMinutes() == 0) {
        return Array.from({ length: 24 }, (_, i) => i).filter(
          (hour) =>
            hour < getHour(seletedataItem.value.plan_time as string).getHours() ||
            hour >= getHour(seletedataItem.value.plan_time as string, 4).getHours()
        );
      }
      return Array.from({ length: 24 }, (_, i) => i).filter(
        (hour) =>
          hour < getHour(seletedataItem.value.plan_time as string).getHours() ||
          hour > getHour(seletedataItem.value.plan_time as string, 4).getHours()
      );
    }
  } else {
    const startHour = getHour(seletedataItem.value.plan_time as string).getHours();
    const startDate = getHour(seletedataItem.value.plan_time as string).getDate();
    const startTime = new Date(
      getHour(seletedataItem.value.plan_time as string).getTime()
    );
    startTime.setHours(startHour - 4);
    if (startTime.getDate() !== startDate) {
      return Array.from({ length: 24 }, (_, i) => i).filter(
        (hour) =>
          hour < startTime.getHours() &&
          hour > getHour(seletedataItem.value.plan_time as string).getHours()
      );
    } else {
      return Array.from({ length: 24 }, (_, i) => i).filter(
        (hour) =>
          hour < getHour(seletedataItem.value.plan_time as string, -4).getHours() ||
          hour > getHour(seletedataItem.value.plan_time as string).getHours()
      );
    }
  }
};

//分钟限制
const disabledMinutes = (hour: number) => {
  const GeyDates = new Date(seletedataItem.value.plan_time as string);

  if (seletedataItem.value.plan_type == "onduty") {
    if (hour == getHour(seletedataItem.value.plan_time as string).getHours()) {
      return makeRange(
        0,
        getHour(seletedataItem.value.plan_time as string).getMinutes() - 1
      );
    } else if (hour == getHour(seletedataItem.value.plan_time as string, 4).getHours()) {
      return makeRange(
        getHour(seletedataItem.value.plan_time as string).getMinutes(),
        59
      );
    } else {
      return makeRange(-1, -1);
    }
  } else {
    if (hour == getHour(seletedataItem.value.plan_time as string).getHours()) {
      return makeRange(
        getHour(seletedataItem.value.plan_time as string).getMinutes() + 1,
        59
      );
    } else if (hour == getHour(seletedataItem.value.plan_time as string, -4).getHours()) {
      return makeRange(0, getHour(seletedataItem.value.plan_time as string).getMinutes());
    } else {
      return makeRange(-1, -1);
    }
  }
};

//秒数限制
const disabledSeconds = (hour: number, minute: number) => {
  if (seletedataItem.value.plan_type == "onduty") {
    if (
      hour == getHour(seletedataItem.value.plan_time as string).getHours() &&
      minute == getHour(seletedataItem.value.plan_time as string).getMinutes()
    ) {
      return makeRange(
        0,
        getHour(seletedataItem.value.plan_time as string).getSeconds() - 1
      );
    } else {
      return makeRange(-1, -1);
    }
  } else {
    if (
      hour == getHour(seletedataItem.value.plan_time as string).getHours() &&
      minute == getHour(seletedataItem.value.plan_time as string).getMinutes()
    ) {
      return makeRange(
        getHour(seletedataItem.value.plan_time as string).getSeconds() + 1,
        59
      );
    } else {
      return makeRange(-1, -1);
    }
  }
};

//比较两个时间大小
function compareDateTimeStrings(dateTimeStr1: string, dateTimeStr2: string): string {
  // 解析第一个时间字符串

  const date1 = new Date(dateTimeStr1);

  // 解析第二个时间字符串
  const date2 = new Date(dateTimeStr2);

  if (seletedataItem.value.plan_type == "onduty") {
    if (date1.getDate() != date2.getDate()) {
      date1.setDate(date1.getDate() - 1);
    }
  } else {
    if (date1.getDate() != date2.getDate()) {
      date1.setDate(date1.getDate() + 1);
    }
  }

  if (date1 > date2) {
    return "1"; // dateTimeStr1 大于 dateTimeStr2
  } else if (date1 < date2) {
    return "-1"; // dateTimeStr1 小于 dateTimeStr2
  } else {
    return "0"; // dateTimeStr1 等于 dateTimeStr2
  }
}

//判断是否跨天
function addOneDay(dateTimeStr: string, addORred: number): string {
  // 解析输入的时间字符串
  const date = new Date(dateTimeStr.replace(" ", "T"));

  // 增加一天
  date.setDate(date.getDate() + addORred);

  // 获取年、月、日
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");

  return `${year}-${month}-${day}`;
}

watch(
  () => attendanceStatusRequest.value.kaoqin_time,
  (newval, olldval) => {
    if (seletedataItem.value.plan_type == "onduty") {
      if (
        compareDateTimeStrings(
          `${YYYY_MM_DD.value} ${newval}`,
          seletedataItem.value.plan_time as string
        ) === "-1"
      ) {
        YYYY_MM_DD.value = addOneDay(seletedataItem.value.plan_time as string, 1);
      } else {
        YYYY_MM_DD.value = String(seletedataItem.value.plan_time).split(" ")[0];
      }
    } else {
      if (
        compareDateTimeStrings(
          `${YYYY_MM_DD.value} ${newval}`,
          seletedataItem.value.plan_time as string
        ) === "1"
      ) {
        YYYY_MM_DD.value = addOneDay(seletedataItem.value.plan_time as string, -1);
      } else {
        YYYY_MM_DD.value = String(seletedataItem.value.plan_time).split(" ")[0];
      }
    }
  }
);

function handleEditAttendanceStatusClick(dayCheckStatus: AttendanceRecordDayCheckStatus) {
  if (attendanceStatusRequest.value.id) {
    ElMessage.warning("先取消考勤修改框");
    return 0;
  }

  // console.log(dayCheckStatus);
  
  YYYY_MM_DD.value = String(dayCheckStatus.plan_time).split(" ")[0];
  seletedataItem.value = dayCheckStatus;

  options.value = [];
  if (dayCheckStatus.plan_type == "onduty") {
    for (let i = 1; i <= ATTENDANCE_STATUS_QUANTITY; i++) {
      if (status(i as AttendanceStatus) !== undefined) {
        options.value.push({
          label: status(i as AttendanceStatus)!,
          value: i,
          disabled: i == 3 || i == 4,
        });
      }
    }
  } else {
    for (let i = 1; i <= ATTENDANCE_STATUS_QUANTITY; i++) {
      if (status(i as AttendanceStatus) !== undefined) {
        options.value.push({
          label: status(i as AttendanceStatus)!,
          value: i,
          disabled: i == 2 || i == 4,
        });
      }
    }
  }

  nextTick(() => {
    const now = new Date(dayCheckStatus.plan_time as string);
    attendanceStatusRequest.value.kaoqin_time = `${String(now.getHours()).padStart(
      2,
      "0"
    )}:${String(now.getMinutes()).padStart(2, "0")}:${String(now.getSeconds()).padStart(
      2,
      "0"
    )}`;
  });

  attendanceStatusRequest.value = {
    id: dayCheckStatus.id,
    kaoqin_status: dayCheckStatus.actually_status as AttendanceStatus,
  };
}

function closefun() {
  isDrawerShow.value = false;
  attendanceStatusRequest.value = {};
}

function handleSubmitClick() {
  formRef.value?.validate(async (isValid) => {
    if (isValid) {
      try {
        const { code, msg } = await updateAttendanceStatus(
          attendanceStatusRequest.value,
          YYYY_MM_DD
        );
        if (code === "200") {
          ElMessage.success(msg);
          // 修改考勤记录成功后关闭抽屉
          isDrawerShow.value = false;
          emit("updateSuccess");
          emit("success");
          attendanceStatusRequest.value = {};
        } else {
          ElMessage.error(msg);
        }
      } catch (error) {
        if (isAxiosError(error) && error.response?.data.message != undefined) {
          ElMessage.error(error.response?.data.message);
        }
      }
    } else {
      ElMessage.error("表单验证失败，请检查输入");
    }
  });
}

async function handleKaoqinchongsuan() {
  const res: { msg?: any; data?: []; code?: string } = await getKaoqinBackcal({
    userid: props.userid,
    day: props.attendanceRecord?.day,
  });

  if (res.code == "200") {
    ElMessage.success(res.msg);
  } else {
    ElMessage.error(res.msg);
  }
}

function tagType(attendanceStatus: number) {
  switch (attendanceStatus) {
    case 1:
      return "success";
    case 2:
    case 3:
      return "warning";
    case 4:
      return "danger";
  }
}

function timeLineItemTimestamp(actuallyTime?: string) {
  if (actuallyTime !== undefined && actuallyTime !== "None") {
    return `打卡时间：${actuallyTime}`;
  }
}
</script>
<style lang="scss" scoped>
.buttons {
  margin-left: 10px;
}

.edit-attendance {
  .title {
    color: #333;
    margin-bottom: 20px;
  }
}
.RecAttendance {
  position: absolute;
  top: 20px;
  right: 70px;
}
.xianzhihangshu {
  width: 100%; /* 限制容器宽度 */
  display: -webkit-box; /* 设置为WebKit内核的弹性盒子模型 */
  -webkit-box-orient: vertical; /* 垂直排列 */
  -webkit-line-clamp: 2; /* 限制显示两行 */
  overflow: hidden; /* 隐藏超出范围的内容 */
  text-overflow: ellipsis; /* 使用省略号 */
}
</style>
